<template>
  <div class="MaterialInspectionFormEdit">
    <el-dialog v-loading.lock="loading"
      class="base-dialog system-user-dialog"
      :append-to-body="true"
      title="检验单详情"
      align="center"
      :close-on-click-modal="false"
      :visible.sync="dialogFormVisible"
      @closed="closeDialog">
      <el-descriptions class="margin-top"
        :column="3"
        border>
        <el-descriptions-item>
          <template slot="label"> 来源单号 </template>

          {{ formData.orderNum }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 来源业务类型 </template>
          {{ formData.orderTypeName }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 检查类型 </template>
          {{ formData.formTypeName }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 仓库 </template>
          {{ formData.storageName }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 检验员 </template>
          {{ formData.inspectorName }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 检验日期 </template>
          {{ formData.inspectionDate | dateTimeFormat }}
        </el-descriptions-item>
      </el-descriptions>
      <div class="title">检验清单</div>
      <el-table :data="formData.materialInspectionDetailsList"
        highlight-current-row>
        <el-table-column label="物料编号">
          <template slot-scope="scope">
            {{ scope.row.productNum }}
          </template>
        </el-table-column>
        <el-table-column label="物料名称">
          <template slot-scope="scope">
            {{ scope.row.productName }}
          </template>
        </el-table-column>

        <el-table-column label="别名">
          <template slot-scope="scope">
            {{ scope.row.aliasName }}
          </template>
        </el-table-column>
        <el-table-column label="分类">
          <template slot-scope="scope">
            {{ scope.row.typeName }}
          </template>
        </el-table-column>
        <el-table-column label="型号规格">
          <template slot-scope="scope">
            {{ scope.row.size }}
          </template>
        </el-table-column>
        <el-table-column label="包装单位">
          <template slot-scope="scope">
            {{ scope.row.packingUnit }}
          </template>
        </el-table-column>
        <el-table-column label="供应商">
          <template slot-scope="scope">
            {{ scope.row.supplierName }}
          </template>
        </el-table-column>
        <el-table-column label="合格数量">
          <template slot-scope="scope">
            {{ scope.row.qualifiedCount }}
          </template>
        </el-table-column>
        <el-table-column label="不合格数量">
          <template slot-scope="scope">
            {{ scope.row.unqualifiedCount }}
          </template>
        </el-table-column>
      </el-table>
      <div class="title">检验备注</div>
      <div class="border">{{ formData.remark }}</div>
      <div class="title">检查验证情况及结果</div>
      <div class="border">{{ formData.inspectionResult }}</div>
    </el-dialog>
  </div>
</template>

<script>
import { get } from "../../../api/Material/MaterialInspectionForm.js";
import moment from 'moment';
export default {
  name: "MaterialInspectionFormEdit",
  filters: {
    dateTimeFormat(dateTime) {
      if (!dateTime) {
        return dateTime;
      }
      return moment(dateTime).format("YYYY-MM-DD");
    },
  },
  props: {
    dialogFormVisible: {
      type: Boolean,
      default: false,
    },
    readOnly: {
      type: Boolean,
      default: false,
    },
    editId: {
      type: [String, Number],
      default: "",
    },
  },
  data() {
    return {
      loading: false,
      formLabelWidth: "100px",
      dataList: [],
      formData: {
        id: 0,
        formNum: "",
        formTypeName: "",
        orderNum: "",
        orderTypeName: "",
        storageName: "",
        statusName: "",
        remark: "",
        inspectionDate: 0,
        inspectorName: "",
        materialInspectionDetailsList: [],
        inspectionResult: "",
      }
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    cancel() {
      this.$emit("update:dialogFormVisible", false);
    },
    closeDialog() {
      this.cancel();
    },
    init() {
      var obj = {};
      obj.id = this.editId;
      get(obj).then(res => {
        this.formData.id = res.data.id
        this.formData.formNum = res.data.formNum
        this.formData.formTypeName = res.data.formTypeName
        this.formData.orderNum = res.data.orderNum
        this.formData.orderTypeName = res.data.orderTypeName
        this.formData.storageName = res.data.storageName
        this.formData.statusName = res.data.statusName
        this.formData.remark = res.data.remark
        this.formData.inspectionDate = res.data.inspectionDate
        this.formData.inspectorName = res.data.inspectorName
        this.formData.materialInspectionDetailsList = res.data.materialInspectionDetailsList
        this.formData.inspectionResult = res.data.inspectionResult
      })
    }
  },
};
</script>
<style lang="scss" scoped>
.border {
  text-align: left;
  height: 100px;
  border: 1px solid #e6ebf5;
  text-indent: 2px;
  margin-top: 10px;
  white-space: pre-wrap;
}

.title {
  text-align: left;
  padding-top: 14px;
  font-weight: 900;
}

.MaterialInspectionFormEdit {}
</style>
